<template>
  <el-main
    class="canvas-main"
    :id="controlid"
    :style="{ height: isadapt === false ? '100%' : 'auto' }"
  >
    <div v-if="isadapt === false" style="width: 100%;">
      <div id="canvas-wp" class="canvas-panel-wrap">
        <div class="screen-shot">
          <div id="canvas-coms" class="canvas-panel" :style="canvasmaincss">
            <slot name="content" />
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="scale-slider-wp">
          <el-slider
            style="    margin-top: -8px;"
            v-model="scale"
            :min="10"
            :max="200"
            :step="5"
            :show-tooltip="false"
            @change="submitScale"
          />
        </div>
        <div class="scale-select-wp">
          缩放比例：
          <el-dropdown class="dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ scale + '%' }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item in options"
                :key="item.value"
                :command="item.value"
                >{{ item.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div v-else class="canvas-content">
      <slot name="content" /> <br style="clear:both;" />
    </div>
  </el-main>
</template>
<script>
export default {
  props: ['cwidth', 'cheight', 'isadapt', 'cbackgroundurl'],
  data() {
    return {
      controlid: '',
      options: [
        { value: 200, label: '200%' },
        { value: 150, label: '150%' },
        { value: 100, label: '100%' },
        { value: 50, label: '50%' },
        { value: -1, label: '自适应' }
      ],
      scale: 50,
      canvasmaincss: `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
    }
  },
  methods: {
    submitScale() {
      this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
    },
    handleCommand(command) {
      this.scale = command
      if (this.scale !== -1) {
        this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
      } else {
        this.selfadaption()
      }
    },
    selfadaption() {
      const docWidth = document.getElementById(this.controlid).offsetWidth
      const wscale = (docWidth - 25) / this.cwidth
      this.scale = wscale * 100

      this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
    }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
    console.log(`${this.cwidth}~${this.cheight}`)
    this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
    console.log(this.canvasmaincss)
  },
  mounted() {
    // const erd = elementResizeDetectorMaker()
    // erd.listenTo(document.getElementById($this.controlid), () => {
    //   $this.$nextTick(() => {
    //     $this.selfadaption()
    //   })
    // })
    this.selfadaption()
  },
  watch: {
    cwidth(val) {
      this.cwidth = val
      this.canvasmaincss = `
        width: ${String(val)} px;
        height: ${String(this.cheight)} px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
      this.selfadaption()
    },
    cheight(val) {
      this.cheight = val
      this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.val)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${this.cbackgroundurl});`
      this.selfadaption()
    },
    cbackgroundurl(val) {
      this.canvasmaincss = `
        width: ${String(this.cwidth)}px;
        height: ${String(this.cheight)}px;
        transform: scale(${String(
          this.scale / 100
        )}) translate(0px, 0px);backgroundImage:url(${val});`
    }
  }
}
</script>
<style lang="scss" scoped>
.canvas-main {
  position: relative;
  display: flex;
  height: 100%;
  padding: 0;
  user-select: none;
  flex: 1;
  background: url(/images/bg-canvas.png);
  .footer {
    bottom: 5px;
    background: #222528;
    box-shadow: 0 -1px #000;
    width: 100%;
    height: 25px;
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
  }
  .scale-slider-wp {
    width: 190px;
    float: right;
    margin-right: 40px;
  }
  .scale-select-wp {
    float: right;
    margin-right: 10px;
    color: white;
  }
}
.dropdown {
  color: white;
}
.canvas-panel-wrap {
  position: relative;
  width: 100%;
  height: calc(100% - 32px);
  overflow: auto;

  .canvas-panel {
    top: 10px;
    left: 10px;
    background-position: center, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, contain;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 30px 0;
    transition: 0.2s all ease-in-out;
    transform-origin: 0 0;
    width: 1920px;
    height: 1080px;
    position: absolute;
    transform: scale(0.542593) translate(0px, 0px);
    // background-image: url(/images/bj.png);
    // background-color: rgba(13, 42, 67, 0);
    background-color: white;
  }
}
.canvas-content {
  width: 100%;
  background-color: white;
}
</style>
